<template>
  <div class="work">
    <el-button
      type="primary"
      style="float: left; position: fixed; left: 0; bottom: 0"
      :disabled="current == 1 ? true : false"
      @click="back"
    >
      上一页
    </el-button>
    <el-button
      type="primary"
      style="float: right; position: fixed; right: 0; bottom: 0"
      :disabled="
        current == Math.ceil(this.total / this.limit)
          ? true
          : false || total == 0
      "
      @click="next"
    >
      下一页
    </el-button>
    <el-card class="box-card">
      <div class="clearfix">
        <span>我的帖子</span>
        <el-divider></el-divider>
        <div>
          <el-row style="font-weight: bold" :gutter="24">
            <el-col :span="10">标题</el-col>
            <el-col :span="6">时间</el-col>
            <el-col :span="4">点赞数</el-col>
            <el-col :span="4">审核结果</el-col>
          </el-row>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text item">
        <div v-for="(item, index) in workList" :key="index">
          <el-row :gutter="24">
            <el-col :span="10">
              <el-link
                @click="goWorkInfo(item.workId)"
                type="primary"
                >{{ item.header }}</el-link
              >
            </el-col>
            <el-col style="float: left" :span="6">
              <span>{{ item.gmtCreate }}</span>
            </el-col>
            <el-col :span="4">
              <span>{{ item.goodNum }}</span>
            </el-col>
            <el-col :span="4">
              <el-tag v-if="item.isPass === 1" type="success">已通过</el-tag>
              <el-tag v-if="item.isPass === 2" type="info">审核中</el-tag>
              <el-tag v-if="item.isPass === 0" type="error">未通过</el-tag>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import work from "@/api/work";

export default {
  data() {
    return {
      workList: [],
      workListPage: [],
      current: 1, //页码
      limit: 4, //每页多少行
      total: 0, //总记录数,
    };
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      work.getAllListByUserId(this.$store.state.user.userId).then((res) => {
        this.workList = res.data.workList;
        this.workListPage = res.data.workList;
        this.total = this.workList.length;
        this.pageSlice()
      });
    },
    goWorkInfo(id) {
        this.$router.push({path: '/workInfo', query: {id: id}})
    },
    back() {
        this.current -= 1;
        this.pageSlice()
    },
    next() {
        this.current += 1;
        this.pageSlice()
    },
    sliceArr(arr) {
      let newObj = [];
      for (let i in arr) {
        newObj[i] = arr[i];
      }
      return newObj.slice(
        (this.current - 1) * this.limit,
        this.current * this.limit
      );
    },
    pageSlice() {
        let copyWorkList = this.workListPage;
        this.workList = this.sliceArr(copyWorkList);
    },
  },
};
</script>

<style scoped>
.work {
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 5%;
}
</style>>
